<!--
 * @Descripttion: 报表
 * @version: V1.0
 * @Author: GaoWei
 * @Date: 2021-06-11 18:06:42
 * @LastEditors: GW
 * @LastEditTime: 2021-09-25 18:02:53
-->
<template>
    <nly-content-wrapper style="padding-top:55px;">
        <div class="report-warpper">
            <!-- <section class="workplace-title-box">
                <h2 class="workplace-title">报表与分析</h2>
                <div class="workplace-btn">
                    <a-button @click="handleShow">设计</a-button>
                </div>
            </section> -->
            <section class="workplace-content">
                <a-row>
                    <a-col :span="2" class="item-box" @click="lookDataList(1,'PurchaseOrder_Execute_Detail_Report','采购订单执行明细表')">
                        <img src="../../assets/chart.png" alt="" class="chart-icon">
                        <p class="margin-top-10">采购订单执行明细表</p>
                    </a-col>
                    <a-col :span="2" class="item-box" @click="lookDataList(1,'PurchaseOrder_Execute_SUM_Detail_Report','采购订单执行汇总表')">
                        <img src="../../assets/chart.png" alt="" class="chart-icon">
                        <p class="margin-top-10">采购订单执行汇总表</p>
                    </a-col>
                    <a-col :span="2" class="item-box" @click="lookDataList(1,'PurchaseRequisition_Execute_Detail_Report','请购订单执行明细表')">
                        <img src="../../assets/chart.png" alt="" class="chart-icon">
                        <p class="margin-top-10">请购订单执行明细表</p>
                    </a-col>
                    <a-col :span="2" class="item-box" @click="lookDataList(1,'PurchaseRequisition_Execute_SUM_Detail_Report','请购订单执行汇总表')">
                        <img src="../../assets/chart.png" alt="" class="chart-icon">
                        <p class="margin-top-10">请购订单执行汇总表</p>
                    </a-col>
                </a-row>
            </section>
            <div class="list-wrapper-report">
                <div class="report-title">{{reportTitle}}</div>
                <dynamicListDetails v-if="showModel== 1" ref="detailSearchRef" :reportCode="reportCodeDetail" :componentType="1" :basePostData="basePostData"></dynamicListDetails>
                <dynamicListDetails v-if="showModel== 2" ref="statisticalSearchRef" :reportCode="reportCodeStatistical" :componentType="2" :basePostData="basePostData"></dynamicListDetails>
            </div>
        </div>
        <a-modal title="创建仪表盘" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
            <p>{{ ModalText }}</p>
        </a-modal>
        <!--明细-->

    </nly-content-wrapper>
</template>

<script>
import dynamicListDetails from '@/components/OrderDynamicForm/dynamicListDetails'
export default {
    data () {
        return {
            visible: false,
            confirmLoading: false,
            reportCodeDetail: '',          //明细code
            reportCodeStatistical: '',  //统计code
            basePostData: {
                someBusinessType: '0',    // 指定业务类型 默认 0
                // page: { current: 1, pages: 10 }
            },
            showModel: 1,
            reportTitle: null,
        };
    },
    components: {
        dynamicListDetails, //明细统计列表
    },
    created () {
        this.lookDataList(1, 'PurchaseOrder_Execute_Detail_Report', '采购订单执行明细表');
    },
    methods: {
        handleShow () {
            this.visible = true;
        },
        handleOk () {
            this.handleCancel();
        },
        handleCancel () {
            this.visible = false;
        },
        lookDataList (type, source, title) {
            this.showModel = type;
            this.reportTitle = title;
            if (type == 1) {
                //明细
                this.reportCodeDetail = source;
                setTimeout(() => {
                    this.$refs.detailSearchRef.getSystemplan();
                    this.$refs.detailSearchRef.getMyselfPlan();
                    this.$refs.detailSearchRef.getUnit();
                }, 500)
            } else if (type == 2) {
                this.reportCodeStatistical = source;
                setTimeout(() => {
                    this.$refs.statisticalSearchRef.getSystemplan();
                    this.$refs.statisticalSearchRef.getMyselfPlan();
                    this.$refs.statisticalSearchRef.getUnit();
                }, 500)
            }
        }
    }
};
</script> 

<style lang="less" >
    .report-warpper {
        height: 100%;
        overflow-y: auto;
    }
    .workplace-title-box {
        position: relative;

        .workplace-title {
            text-align: center;
        }
        .workplace-btn {
            position: absolute;
            right: 10px;
            top: 0;
        }
    }

    .workplace-content {
        .item-box {
            padding: 10px;
            cursor: pointer;
            text-align: center;
        }
        .chart-icon {
            width: 50px;
        }
        .item-box:hover {
            color: #00a0e9;
        }
    }
    .list-wrapper-report {
        padding: 10px;
        .report-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
    }
</style>
